import React, { Component } from "react";

export default class extends Component {
  state = { mouse: false };
  handleMouse = (flag) => {
    return () => {
      this.setState({ mouse: flag });
      console.log(flag);
    };
  };
  //勾选或取消
  handleChange = (id) => {
    return (event) => {
      this.props.updateTodo(id, event.target.checked);
    };
  };
  //删除的回调
  handleDelete = (id) => {
    if(window.confirm('确认删除吗')){
    this.props.deleteTodo(id);
      
    }
  };
  render() {
    const { id, name, done } = this.props;
    const { mouse } = this.state;
    return (
      <div>
        <li
          style={{ backgroundColor: mouse ? "#ddd" : "white" }}
          onMouseLeave={this.handleMouse(false)}
          onMouseEnter={this.handleMouse(true)}
        >
          <label>
            <input
              type="checkbox"
              defaultChecked={done}
              onChange={this.handleChange(id)}
            />
          </label>
          <span>{name}</span>
          <button
            className="btn btn-danger"
            style={{ display: mouse ? "block" : "none" }}
            onClick={() => {
              this.handleDelete(id);
            }}
          >
            删除
          </button>
        </li>
      </div>
    );
  }
}
